<template>
	<div>
		<ma-body>
			<ma-refresh slot="content">
				<image src="@/static/img/isBack.png" mode="aspectFill" class="backImg" @tap="toBack"></image>
				<div class="big-box">
					<div class="product-info">
						<image :src="productInfo.cover" mode="aspectFill" class="product-img"></image>
						<div class="info-box">
							<span class="info-title">{{ productInfo.spuTitle }}</span>
							<span class="info-money">
								<label>￥</label>{{  productInfo.spuPrice / 100 }}
							</span>
						</div>
					</div>
					
					<div class="input-box" @tap="toCoupon">
						<div class="left center">
							<span class="jiu-font28-efe" style="color: #bbb;width: 16vw;display: block;margin-right: 10.4vw;">优惠券</span>
							<span class="jiu-font28-ffc" style="color: #625E56;">请选择</span>
						</div>
						<image src="@/static/img/enter16.png" mode="aspectFill" class="image427"></image>
					</div>
					
					<div class="input-box">
						<div class="left center">
							<span class="jiu-font28-efe" style="color: #bbb;width: 16vw;display: block;margin-right: 10.4vw;">支付方式</span>
							<span class="jiu-font28-ffc" style="color: #FFCE80;">汇聚支付</span>
						</div>
						<image src="@/static/img/enter16.png" mode="aspectFill" class="image427"></image>
					</div>
				</div>
			</ma-refresh>
			<div slot="footer">
				<div class="footer-box">
					<div class="footer-left">
						<span style="font-size: 3.2vw;font-weight: 300;">实付：￥</span>
						<span style="font-size: 4.27vw;font-weight: 500;">{{ productInfo.spuPrice / 100 }}</span>
					</div>
					<div class="right-btn" @tap="onPayment">立即支付</div>
				</div>
			</div>
		</ma-body>
		<u-modal v-model="cancelModal" :content="content" @confirm="buy" :show-cancel-button="true"></u-modal>
		<product-modal ref="productModal"></product-modal>
	</div>
</template>

<script>
	import productModal from '@/subPackA/components/product-modal/product-modal';
	export default{
		components: {
			productModal
		},
		data(){
			return{
				productInfo: {},
				orderId: '',
				cancelModal: false,
				content: '确定购买该数字藏品吗？',
				signingId: '',
				oldInfo: {},
				spuId: '',
			}
		},
		onLoad(e){
			this.productInfo = JSON.parse(e.productInfo);
			this.orderId = e.orderId;
			this.signingId = e.signingId;
			this.oldInfo = e.oldInfo;
			this.spuId = this.productInfo.spuId;
		},
		methods: {
			onPayment(){
				this.$u.api.getPaySigningList().then(res=>{
					console.log(res)
					if(res.length ==  0){
						this.$ma.route.buyInput({
							productInfo: JSON.stringify(this.productInfo),
							orderId: this.orderId
						})
					}else{
						this.$ma.route.selectCard({
							productInfo: JSON.stringify(this.productInfo),
							orderId: this.orderId
						})
					}
				})
				// this.cancelModal = true;
			},
			buy(){
				let data = {
					amount: this.productInfo.skuPrice,
					moduleName: 'product',
					signingId: this.signingId,
					orderId: this.orderId
				};
				this.$u.api.onQuickPay(data).then(res=>{
					let obj = this.productInfo;
					setTimeout(()=>{
						this.$refs.productModal.open({
							obj,
							success: async () => {
								let id;
								if(this.productInfo.type == 'collection') id = 0;
								else id = 1;
								uni.showToast({
									icon: 'none',
									title: '跳转中，请稍后'
								})
								setTimeout(()=>{
									this.$ma.route.myCollection({
										currentIndex: id
									})
								},4000)
							}
						});
					},1000)
				})
			},
			toCoupon(){
				// uni.showToast({
				// 	icon: 'none',
				// 	title: '敬请期待'
				// })
				// return;
				this.$ma.route.coupon({
					id: this.spuId,
					creatorId: this.creatorId,
					couponType: 'shop'
				});
			}
		}
	}
</script>

<style lang="scss">
	.center{
		display: flex;
		align-items: center;
	}
	.image427{
		width: 4.27vw;
		height: 4.27vw;
	}
	.big-box{
		display: flex;
		flex-direction: column;
		
		.product-info{
			margin-top: 2.67vw;
			padding: 4.27vw 6.4vw 4.27vw 4.27vw;
			background-color: #1b1b1b;
			display: flex;
			
			.product-img{
				width: 32vw;
				height: 32vw;
				border-radius: 5.33vw;
				flex-shrink: 0;
			}
			
			.info-box{
				display: flex;
				flex-direction: column;
				margin-left: 3.2vw;
				
				.info-title{
					font-size: 3.73vw;
					font-weight: 500;
					color: #fff;
				}
				
				.info-money{
					flex: 1;
					display: flex;
					align-items: end;
					color: #A972FF;
					font-size: 4.27vw;
					font-weight: 500;
				}
			}
		}
		
		.input-box{
			background-color: #1b1b1b;
			padding: 4.27vw;
			padding-right: 5.33vw;
			display: flex;
			justify-content: space-between;
			margin-top: 2.67vw;
		}
	}

	.footer-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 2.13vw 4.27vw;
		background-color: #1b1b1b;
		.footer-left{
			color: #A972FF;
			font-size: 3.2vw;
		}
		.right-btn{
			width: 44.8vw;
			line-height: 12.8vw;
			background: linear-gradient(90deg, #FFCE80 0%, #A972FF 100%);
			box-shadow: 0vw 3vw 5vw rgba(71,12,114,0.48);
			text-align: center;
			border-radius: 6.4vw;
			font-size: 3.73vw;
			color: #000;
			font-weight: 500;
		}
	}
</style>